<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>寰宇电音</title>
	<meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/Swiper/3.1.7/css/swiper.min.css">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/Swiper/3.1.7/js/swiper.jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/radio.css">
</head>
<body>
	<header>
	    <a href="javascript:;" class="menu-btn"><img src="img/menu.png" class="menu-icon" /><img src="img/exit.png" class="exit" /></a>
        <span class="center"><img src="img/logo.png" /></span>
        <a href="javascript:;" class="right"><img src="img/search.png" /></a>
	</header>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><a href="javascript:;"><img src="img/index_banner.png" /></a></div>
			<div class="swiper-slide"><a href="javascript:;"><img src="img/index_banner.png" /></a></div>
			<div class="swiper-slide"><a href="javascript:;"><img src="img/index_banner.png" /></a></div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
	<div class="smallTitle"><img src="img/news_title.png" /></div>
	<ul class="news-nav">
		<li class="active">资讯</li>
		<li>活动</li>
	</ul>
	<div class="news-content">
	<!--资讯	start-->
		<div class="news-list">
			<div class="new-item">
				<div class="item-left"><img src="img/item.png" /></div>
				<div class="item-right">
					<p class="item-title">世界百大DJ巡演葡萄牙最丰厚的紧身裤金凤凰</p>
					<p class="time"><img src="img/time_icon.png" />时间：<span>2016-10-22</span></p>
					<p class="time"><img src="img/address_icon.png" />地点：宝山区</p>
					<p class="label"><img src="img/news_label.png" /><span>资讯</span></p>
				</div>
			</div>
		</div>
	<!--资讯	end-->
	<!--活动	start-->
		<div class="news-list" style="display: none">
			<div class="new-item">
				<div class="item-left"><img src="img/item.png" /></div>
				<div class="item-right">
					<p class="item-title">世界百大DJ巡演葡萄牙最丰厚的紧身裤金凤凰</p>
					<p class="time"><img src="img/time_icon.png" />时间：<span>2016-10-22</span></p>
					<p class="time"><img src="img/address_icon.png" />地点：宝山区</p>
					<p class="label"><img src="img/activity_label.png" /><span>活动</span></p>
				</div>
			</div>
		</div>
	<!--活动	end-->
	</div>
	<script type="text/javascript">
		$(function(){
			var mySwiper = new Swiper('.swiper-container', {
				  loop: true, //循环播放
				  autoplay: 5000,
				  lazyLoading: true, //延迟加载图片
				  lazyLoadingInPrevNext: true, //延迟加载当前图片之前和之后一张图片
				  lazyLoadingOnTransitionStart: true, //过渡一开始就加载
				  pagination: '.swiper-pagination', //导航分页
				  paginationClickable: true //导航点击切换
			});

			$(".news-nav li").on("click",function(){
				var index = $(this).index();
				$(this).addClass('active').siblings().removeClass('active');
				$(".news-content .news-list").hide();
				$(".news-content .news-list").eq(index).show();
			});
		});
	</script>
</body>
</html>